<template>
  <div class="home animate__animated animate__fadeInUp">
    <div id="ProductList-header">
      <p id="ProductList-header2">
        <span id="ProductList-header3">商品列表</span>
      </p>
    </div>
    <el-card shadow="never">
      <!-- 全部商品 -->
      <div id="AllProduct">
        <el-button type="primary" @click="getCon"
          >全部商品({{ this.total3 }})</el-button
        >
        <!-- <el-button @click="onlineVal"
          >已上线(<span class="go-online">{{ this.total1 }}</span
          >)</el-button
        >
        <el-button @click="downlineVal"
          >未上线(<span class="go-online">{{ this.total2 }}</span
          >)</el-button
        > -->
      </div>

      <!-- 商品heard,from表单 -->
      <div id="ProducFrom" class="flex">
        <el-form :inline="true" :model="formInline" class="demo-form-inline">
          <!-- 商品名称/编号 -->
          <el-form-item label="">
            <el-input
              v-model="formInline.id"
              placeholder="商品名称/商品编号"
            ></el-input>
          </el-form-item>
          <!-- <el-form-item label="">
            <el-input
              v-model="formInline.name"
              placeholder="商品名称"
            ></el-input>
          </el-form-item> -->

          <!-- 商品分类 -->

          <el-form-item label="">
            <template>
              <el-select
                v-model="sort_id"
                clearable
                placeholder="选择商品分类"
                @change="change2"
              >
                <el-option
                  v-for="item in options2"
                  :key="item.id"
                  :label="item.name"
                  :value="item.id"
                >
                </el-option>
              </el-select>
            </template>
          </el-form-item>

          <!-- 查询 -->
          <el-form-item>
            <el-button id="product_query" type="primary" @click="search"
              >查询</el-button
            >
          </el-form-item>

          <!-- 添加商品 -->
          <el-form-item>
            <el-button id="add_product" type="add" @click="add_product"
              >添加商品</el-button
            >
          </el-form-item>
        </el-form>
      </div>

      <!-- 商品表格 -->
      <div>
        <el-table
          :row-key="getRowKey"
          :data="tableData"
          tooltip-effect="dark"
          @selection-change="handleSelectionChange"
          style="width: 100%"
          ref="multipleTable"
          :header-cell-style="{
            background: 'RGB(238, 239, 246, 0.34)',
            color: '#606266',
          }"
          border
        >
          <el-table-column
            type="selection"
            width="55"
            align="center"
            :reserve-selection="true"
          >
          </el-table-column>
          <el-table-column fixed prop="id" label="编号" align="center">
          </el-table-column>
          <!-- //图片           -->
          <el-table-column prop="image" label="商品图片" align="center">
            <template slot-scope="scope">
              <el-image
                style="width: 100px; height: 100px"
                :src="scope.row.image"
                :fit="fits"
              >
              </el-image>
              <!-- <video :src="scope.row.video_url" style="width: 100px; height: 100px" :fit="fits"></video> -->
            </template>
          </el-table-column>
          <el-table-column prop="name" label="商品名称" header-align="center">
          </el-table-column>
          <el-table-column prop="price" label="价格" header-align="center">
          </el-table-column>
          <el-table-column prop="status" label="上线" align="center">
          </el-table-column>
          <el-table-column prop="tag" label="标签" align="center">
          </el-table-column>
          <el-table-column prop="volume" label="销量" align="center">
          </el-table-column>

          <!-- 操作 -->
          <el-table-column label="操作" align="center">
            <!-- 商品编辑按钮 -->
            <template slot-scope="scope">
              <el-button
                type="text"
                @click.native.prevent="product_edit(scope.$index, tableData)"
                >编辑</el-button
              >
              <!-- 商品删除按钮 -->
              <el-button
                type="text"
                @click.native.prevent="del(scope.$index, tableData)"
                >删除</el-button
              >
            </template>
          </el-table-column>
        </el-table>

        <div class="table_footer">
          <!-- <el-row> -->
          <el-row>
            <el-col :span="2">
              <div class="grid-content bg-purple">
                <el-button @click="toggleInverseAllSelection()">反选</el-button>
              </div>
            </el-col>
            <el-col :span="3">
              <el-button @click="toggleSelection()">取消选择</el-button>
            </el-col>
            <el-col :span="6"
              ><div class="grid-content bg-purple-light">
                <el-select
                  v-model="value"
                  placeholder="批量操作"
                  @change="change1"
                  clearable
                >
                  <el-option
                    v-for="item in options"
                    :key="item.value"
                    :label="item.label"
                    :value="item.value"
                  >
                  </el-option>
                </el-select></div
            ></el-col>

            <el-col :span="2"
              ><div class="grid-content bg-purple" @click="select_submit">
                <el-button>确定</el-button>
              </div></el-col
            >

            <p class="paging">
              <el-col :span="15"
                ><div class="grid-content bg-purple-light">
                  <el-pagination
                    background
                    layout="prev, pager, next"
                    :page-size="size"
                    :total="total"
                    @current-change="change"
                    @prev-click="prev"
                    @next-click="next"
                  >
                  </el-pagination></div
              ></el-col>
            </p>
          </el-row>
        </div>
      </div>
    </el-card>
  </div>
</template>
    
<style lang="less" scoped>
* {
  margin: 0;
  padding: 0;
}

.flex {
  display: flex;
}

#ProductList-header {
  width: 100%;
  height: 49px;
  border-top-left-radius: 10px;
  border-top-right-radius: 10px;
  color: #333333;
  display: flex;
  background: -webkit-linear-gradient(
    0deg,
    rgba(81, 81, 81, 1) 0%,
    rgba(81, 81, 81, 1) 0%,
    rgba(174, 174, 174, 1) 100%,
    rgba(174, 174, 174, 1) 100%
  );
  #ProductList-header2 {
    display: flex;
    align-items: center;
    span {
      align-items: center;
      padding-left: 10px;
      font-weight: 700;
      font-style: normal;
      font-size: 16px;
      color: #999999;
      border-left: rgba(30, 159, 255, 1) solid 4px;
      margin-left: 10px;
      font-family: "微软雅黑 Bold", "微软雅黑 Regular", "微软雅黑";
    }
  }
}

#AllProduct {
  display: flex;
  margin-bottom: 20px;
  .go-online {
    color: red;
  }
}

#ProducFrom {
  .el-form-item {
    margin-right: 30px;
    #product_query {
      margin-left: 10px;
    }
    #add_product {
      margin-left: -10px;
    }
  }
}

// 商品表格的表格
.table_footer {
  width: 100%;
  height: 50px;
  line-height: 50px;
  margin-top: 15px;
  align-items: center;
  .paging {
    display: flex;
    justify-content: flex-end;
    align-items: center;
    padding: 0;
    .grid-content {
      align-items: center;
      .el-pagination {
        margin-top: 10px;
        height: 50px;
        line-height: 50px;
      }
    }
  }
}
</style>
<script>
export default {
  data() {
    return {
      // 分页
      page: 1,
      page2:1,
      page3:1,
      size: 5,
      total: 0, //全部
      total1: 0, //上线
      total2: 0, //下线
      total3 :0,
      online_val: 0,
      downline_val: 0,
      value: "",
      sortID: "",
      // 商品heard,from表单
      checked: false,
      formInline: {
        id: "",
        name: "",
      },
      // 商品分类
      options2: [],
      sort_id: "",

      // 点击上线
      lineVal_status: 0,

      options: [
        {
          value: "1",
          label: "上架",
        },
        {
          value: "0",
          label: "下架",
        },
        {
          value: "2",
          label: "删除",
        },
      ],
      // 批量选择status
      idArr: [],
      batch: "",
      //znengze
      patt1: /^[0-9]*$/,

      value: "",
      label: "",

      fits: "cover",
      // 表格数据
      tableData: [
        {
          number: 1,
          picture: "https://source.unsplash.com/random",
          name: "健身哑铃",
          price: "价格:￥100.00",
          online: "已上线",
          label_bq: "无",
          sales: 100,
        },
      ],
      multipleSelection: [],
      isIndeterminate: false,
    };
  },

  methods: {
    getRowKey(row) {
      return row.id;
    },

    // 选择商品分类的渲染·
    sort_name() {
      this.$axios({
        url: "/gym/sort/list",
      }).then((res) => {
        // console.log(res);
        this.options2 = res.data.data;
      });
    },

    // 下拉框
    change2(index) {
      this.sort_id = index;
      console.log(this.sort_id);
    },

    // 查询
    search() {
      // console.log(this.so rt_id)
      // console.log(this.formInline.id)
      // console.log(this.patt1.test(this.formInline.id))//正则判断

      if (this.sort_id == "" && this.formInline.id != "") {
        if (this.patt1.test(this.formInline.id) == true) {
          console.log(this.formInline.id);
          this.$axios({
            url: "/gym/goods/list",
            params: {
              id: this.formInline.id,
            },
          }).then((res) => {
            console.log(res);
            this.tableData = res.data.data;
            console.log(this.tableData);
            for (let i = 0; i < this.tableData.length; i++) {
              if (this.tableData[i].status == "0") {
                this.tableData[i].status = "下线";
              } else {
                this.tableData[i].status = "上线";
              }
            }
          });
        } else {
          // console.log(this.formInline.id);
          this.$axios({
            url: "/gym/goods/list",
            params: {
              name: this.formInline.id,
            },
          }).then((res) => {
            console.log(res);
            this.tableData = res.data.data;
            console.log(this.tableData);
            for (let i = 0; i < this.tableData.length; i++) {
              if (this.tableData[i].status == "0") {
                this.tableData[i].status = "下线";
              } else {
                this.tableData[i].status = "上线";
              }
            }
          });
        }
      } else if (this.formInline.id == "" && this.sort_id != "") {
        this.$axios({
          url: "/gym/goods/list",
          params: {
            sId: this.sort_id,
          },
        }).then((res) => {
          // console.log(res);
          this.tableData = res.data.data;
          // console.log(this.tableData);
          if (this.tableData[0].status == "0") {
            this.tableData[0].status = "下线";
          } else {
            this.tableData[0].status = "上线";
          }
        });
      } else if (this.formInline.id != "" && this.sort_id != "") {
        if (this.patt1.test(this.formInline.id) == true) {
          // console.log(this.formInline.id);
          this.$axios({
            url: "/gym/goods/list",
            params: {
              id: this.formInline.id,
              sId: this.sort_id,
            },
          }).then((res) => {
            // console.log(res);
            this.tableData = res.data.data;
            // console.log(this.tableData);
            for (let i = 0; i < this.tableData.length; i++) {
              if (this.tableData[i].status == "0") {
                this.tableData[i].status = "下线";
              } else {
                this.tableData[i].status = "上线";
              }
            }
          });
        } else {
          // console.log(this.formInline.id);
          this.$axios({
            url: "/gym/goods/list",
            params: {
              name: this.formInline.id,
              sId: this.sort_id,
            },
          }).then((res) => {
            console.log(res);
            this.tableData = res.data.data;
            console.log(this.tableData);
            for (let i = 0; i < this.tableData.length; i++) {
              if (this.tableData[i].status == "0") {
                this.tableData[i].status = "下线";
              } else {
                this.tableData[i].status = "上线";
              }
            }
          });
        }
      }
      this.formInline.id = "";
    },

    //添加商品
    add_product() {
      this.$router.push("addproduct");
    },

    // 表格全选
    toggleSelection(rows) {
      // console.log(rows);
      if (rows) {
        rows.forEach((row) => {
          this.$refs.multipleTable.toggleRowSelection(row);
        });
      } else {
        this.$refs.multipleTable.clearSelection();
      }
    },
    // 全选
    handleSelectionChange(val) {
      this.multipleSelection = val;
      // console.log(this.multipleSelection);
    },

    // 反选，重新遍历一遍数据
    toggleInverseAllSelection(val) {
      this.tableData.forEach((item) => {
        this.$refs.multipleTable.toggleRowSelection(item);
      });
      //  console.log(this.tableData);
    },

    // 表格操作删除
    del(index, data) {
      // console.log(index, data);
      console.log(data[index]);
      this.$confirm("此操作将永久删除该文件, 是否继续?", "提示", {
        confirmButtonText: "确定",
        cancelButtonText: "取消",
        type: "warning",
      })
        .then(() => {
          this.$axios({
            url: "/gym/goods/delete",
            params: {
              id: data[index].id,
            },
          }).then((res) => {
            console.log(res);
            if (res.data.error) {
              // console.log(res);
              this.$message.erro("删除失败");
            } else {
              // console.log(res);
              this.$message({
                type: "success",
                message: "删除成功!",
              });
              // this.getCon();
              console.log(index, data[index]);
              if (data[index].status == "下架") {
                this.downline_val--;
                this.getCon();
                this.online_num();
                this.online_num_d();
              } else if (data[index].status == "上线") {
                this.getCon();
                this.online_num();
                 this.online_num_d();
              }
            }
          });
        })
        .catch(() => {
          this.$message({
            type: "info",
            message: "已取消删除",
          });
        });
    },

    //表格操作编辑
    product_edit(index, data) {
      this.$axios({
        url: "/gym/goods/find",
        params: {
          id: data[index].id,
        },
      }).then((res) => {
        console.log(res);
        sessionStorage.setItem("ruleFormVal", JSON.stringify(res.data.data));
      });

      this.$router.push("productedit");
    },

    // 列表渲染
    getCon() {
      // this.page=1
      this.lineVal_status = 0;
      console.log(this.lineVal_status);
      this.$axios({
        url: "/gym/goods/list",
        params: {
          page: this.page,
          limit: this.size,
        },
      }).then((res) => {
        console.log(res);
        this.tableData = res.data.data;
        if (res.data.count != null) {
          this.total3 = res.data.count;
           this.total=this.total3
        }
        for (let i = 0; i < this.tableData.length; i++) {
          if (this.tableData[i].status == "0") {
            this.tableData[i].status = "下线";
          } else {
            this.tableData[i].status = "上线";
          }
        }
      });
      
      this.total=this.total3
      console.log(this.total);
    },

    // 上按钮数量渲染
    online_num() {
      this.$axios({
        url: "/gym/goods/list",
        params: {
          status: 1,
        },
      }).then((res) => {
        console.log(res);
        this.total1 = res.data.count;
      });
    },

    // 下按钮数量渲染
    online_num_d() {
      this.$axios({
        url: "/gym/goods/list",
        params: {
          status: 0,
        },
      }).then((res) => {
        console.log(res);
        this.total2 = res.data.count;
      });
    },

    // 上线查询
    onlineVal() {
      // console.log(this.lineVal_status);
      this.lineVal_status = 1;
      this.page=1
      // console.log(this.lineVal_status);
      this.$axios({
        url: "/gym/goods/list",
        params: {
          status: 1,
          page: this.page,
          limit: this.size,
        },
      }).then((res) => {
        console.log(res);
        this.tableData = res.data.data;
        if (res.data.count != null) {
          this.total1 = res.data.count;
          
        }
        for (let i = 0; i < this.tableData.length; i++) {
          if (this.tableData[i].status == "1") {
            this.tableData[i].status = "上线";
          } else {
            this.tableData[i].status = "下线";
          }
        }
      });
       this.total= this.total1;
      console.log(this.total1);
      // this.page=Math.ceil(this.total1/5)
      console.log(this.page);

    },

    // 下线查询
    downlineVal() {
      this.lineVal_status = 2;
      this.page=1
      console.log(this.page);
      // console.log(this.lineVal_status);
      this.$axios({
        url: "/gym/goods/list",
        params: {
          status: 0,
          page: this.page,
          limit: this.size,
        },
      }).then((res) => {
        console.log(0,res);
        this.tableData = res.data.data;
        if (res.data.count != null) {
          this.total2 = res.data.count;
          // this.page2=Math.ceil(res.data.count)
        }
        for (let i = 0; i < this.tableData.length; i++) {
          if (this.tableData[i].status == "0") {
            this.tableData[i].status = "下线";
          } else {
            this.tableData[i].status = "上线";
          }
        }
      });
      this.total= this.total2
      
      // console.log(this.total2);
      // this.page=Math.ceil(this.total2/5)
      // console.log(this.page);
    },

    // 批量操作选择器
    change1(index) {
      //  console.log(index);
      this.batch = index;
      //  console.log(this.batch);
    },

    // 根据id批量删除修改商品
    select_submit() {
      this.idArr = this.multipleSelection.map((item) => item.id);
      console.log(this.idArr.toString());
      if (this.idArr.toString() !== "") {
        if (this.batch == "") {
          this.$message.error("请选批量择操作方式");
        } else {
          if (this.batch == 1 || this.batch == 0) {
            this.$axios({
              url: "/gym/goods/updateStatusByIds",
              method: "post",
              data: {
                ids: this.idArr.toString(),
                status: this.batch,
              },
            }).then((res) => {
              // console.log(res);
              console.log(this.batch);
              if (res.data.error) {
                this.$message.erro(res.data.error);
              } else {
                if (this.batch == 1) {
                  this.$message({
                    type: "success",
                    message: "批量操作上架成功!",
                  });
                  this.getCon();
                  this.online_num();
                } else if (this.batch == 0) {
                  this.$message({
                    type: "success",
                    message: "批量操作下架成功!",
                  });
                  this.getCon();
                  this.online_num_d();
                }
              }
            });
          } else if (this.batch = 3) {
            this.$axios({
              url: "/gym/goods/deleteByIds",
              method: "post",
              data: {
                ids: this.idArr.toString(),
              },
            }).then((res) => {
              this.tableData = res.data.data;
              if (res.data.error) {
                this.$message.erro(res.data.error);
              } else {
                this.$message({
                  type: "success",
                  message: "批量删除成功!",
                });
                this.getCon();
                this.online_num();
                this.online_num_d();
              }
            });
          }
        }
      } else {
        this.$message.error("请选择商品");
      }
    },

    handleCheckAllChange() {
      this.$refs.multipleTable.toggleAllSelection();
      this.isIndeterminate = false;
    },
    //分页
    change(page) {
      // this.page = page;
      // this.getCon()
      if (this.lineVal_status == 1) {
        this.page=1
        this.page = page;
        this.onlineVal();
      } else if (this.lineVal_status == 2) {
        this.page=1
        this.page = page;
        this.downlineVal();
      } else if (this.lineVal_status == 0) {
        this.page=1
        this.page = page;
        this.getCon(); 
      }
    },
    prev() {
      if (this.lineVal_status == 1) {
        this.page--;
        this.onlineVal();
      } else if (this.lineVal_status == 2) {
        this.page--;
        this.downlineVal();
      } else if (this.lineVal_status == 0) {
        this.page--;
        this.getCon();
      }
    },
    next() {
      if (this.lineVal_status == 1) {
        this.page++;
        this.onlineVal();
      } else if (this.lineVal_status == 2) {
        this.page++;
        this.downlineVal();
      } else if (this.lineVal_status == 0) {
        this.page++;
        this.getCon();
      }
    },
  },
  mounted() {
    this.getCon();
    this.sort_name();
    this.online_num();
    this.online_num_d();
    // this.total;
  },
};
</script>